<template>
    <table>
        <tr>
            <th>生产年份</th>
            <td>{{product.year}}</td>
        </tr>
        <tr>
            <th>储存方法</th>
            <td>{{product.storage}}</td>
        </tr>
        <tr>
            <th>产地</th>
            <td>{{product.origin}}</td>
        </tr>
        <tr>
            <th>规格</th>
            <td>{{product.specification}}</td>
        </tr>
        <tr>
            <th>保质期</th>
            <td>{{product.date}}</td>
        </tr>
        <tr>
            <th>食品生产许可证</th>
            <td>{{product.licence}}</td>
        </tr>
    </table>
</template>
<script>
import {mapState} from "vuex";
export default {
    computed:{
        ...mapState([
            "product",
        ]),
    },
}
</script>
<style scoped>
    table{
        padding: 0 2.8vw;
        width: 100%;
        text-align: left;
    }
    th{
        font-size: 3.92vw;
        font-weight: normal;
        color: #b0b0b0;
        width: 20%;
        padding: 2.8vw 0;
        border-bottom: 1px solid #eee;
    }
    td{
        font-size: 3.92vw;
        border-bottom: 1px solid #eee;
    }
</style>